<!-- 今日加速流量趋势 -->
<template>
    <div>
      <span class="title">{{title}} <span style="margin-left:10px"> 终端概览拓扑图 </span></span>
        <div ref="linechart" :class="className" :style="{height:height,width:width}"/>
    </div>
</template>

<script>
import * as echarts from 'echarts'
require('echarts/theme/macarons') // echarts theme
import resize from './mixins/resize'
  
  export default {
    mixins: [resize],
    props: {
      className: {
        type: String,
        default: 'chart'
      },
      IP:{
        type:String
      },
      width: {
        type: String,
        default: '100%'
      },
      height: {
        type: String,
        default: '353px'
      },
      autoResize: {
        type: Boolean,
        default: true
      },
      chartData: {
        type: Array,
        required: true
      }
    },
    data() {
      return {
        chart: null
      }
    },
    watch: {
      chartData: {
        deep: true,
        handler(val) {
          this.initChart(val)
        }
      },
      IP:{
        handler(val){
          this.initChart(val)
        }
      }
    },
    mounted() {
      this.$nextTick(() => {
        this.initChart()
      })
    },
    beforeDestroy() {
      if (!this.chart) {
        return
      }
      this.chart.dispose()
      this.chart = null
    },
    methods: {
      initChart() {
        this.chart = echarts.init(this.$refs.linechart, 'macarons')
        this.setOptions(this.chartData,this.IP)
      },
      setOptions(chartData,IP) {
        var linkData = [];
        var codeData = []
        var data = [
          {
            name: IP,
            symbol:'image://',
            symbolSize: [200, 119],
            value: [80, 50],
            x: 100,
            y: 400,

          },
          // {
          //   name: "分数据中心一",
          //   x: 400,
          //   y: 400,
          //   value: [400, 400],
          //   symbol:'image://',
          //   symbolSize:[135,131]
          
          // },
          // {
          //   name: "分数据中心二",
          //   x: 400,
          //   y: 400,
          //   value: [10, 380],
          //   symbol:'image://',
          //   symbolSize:[135,131]
          
          // },
          // {
          //   name: "分数据中心三",
          //   x: 400,
          //   y: 400,
          //   value: [10, 10],
          //   symbol:'image://',
          //   symbolSize:[135,131]
          // },
        ];
        // console.log(chartData);
        chartData.map((item,index)=>{
          if (item.Status === 1) {
            data.push({
              name:item.value,
              x: 400,
              y: 400,
              value: [10+(index*140), 350],
              symbol:'image://',
              symbolSize:[75,71]
            })    
          } else {
            data.push({
              name:item.value,
              x: 400,
              y: 400,
              value: [10+(index*140), 350],
              
              symbolSize:[75,71]
            })    
          }
          
          linkData.push({
            source:IP,
            target:0
          })
          codeData.push({
            coords: [
                [(index*140)+10,360],
                [80, 50],
            ],       
          })
        }),
        
        this.chart.setOption({
            backgroundColor: "",
            xAxis: {
                show: false,
                type: "value"
            },
            yAxis: {
                show: false,
                type: "value"
            },
            tooltip: {
                show:false
            },
            series: [
                {
                    type: "graph",
                    zlevel: 5,
                    draggable: false,
                    coordinateSystem: "cartesian2d", //使用二维的直角坐标系（也称笛卡尔坐标系）
                    label: {
                    normal: {
                        show: true,
                        position:'insideBottom'
                    }
                    },
                    data: data,
                    links:linkData,
                    
                    lineStyle: {
                    normal: {
                        opacity: 1,
                        color: "#53B5EA",
                        curveness: 0.1,
                        width: 2
                    }
                    }
                },
                {
                    type: "lines",
                    coordinateSystem: "cartesian2d",
                    z: 1,
                    zlevel: 2,
                    animation: false,
                    effect: {
                      show: {
                        formatter (name){
                          chartData.map((item,index)=>{
                            if (item.Status === 1) {
                              return true
                            }else{
                              return false
                            }
                          })
                        },
                      },
                      period:8,
                      trailLength: 0.01,
                      symbolSize: 10,
                      symbol: "pin",
                      loop: true,
                      color: "rgba(55,155,255,0.5)"
                    },
                    lineStyle: {
                      normal: {
                          color: "",
                          width: 1,
                          curveness: 0.1
                      }
                    },

                    data: codeData
                }
            ]
        })
      }
    }
  }
  </script>
  
  <style lang="scss" scoped>
    
  </style>
  